<template>
    <div class="app-container calendar-list-container">
        <div class="filter-container justify-between">
            <div>
                <el-switch v-model="multi" inactive-text="批量操作"></el-switch>
                <template v-if="multi">
                    <el-button size="mini" type="danger" @click="doRemove('','确定要删除吗？')">删除</el-button>
                </template>
            </div>
            <div>
                <el-input @keyup.enter.native="doSearch" style="width: 200px;" class="filter-item" placeholder="输入名称搜索"
                          v-model="listQuery.keyword">
                </el-input>
                <el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="doSearch">搜索
                </el-button>
                <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-plus"
                           @click="openEditor()">
                    新增岗位
                </el-button>
            </div>
        </div>
        <el-table ref="multipleTable" :data="list" v-loading="listLoading" element-loading-text="给我一点时间"
                  border fit highlight-current-row style="width: 100%" @selection-change="onSelectionChange"
                  height="500">
            <el-table-column v-if='multi' type="selection" width="55"></el-table-column>
            <el-table-column type="index" width="50"></el-table-column>
            <el-table-column align="left" label="岗位名">
                <template slot-scope="scope">
                    <span>{{scope.row.name }}</span>
                </template>
            </el-table-column>
            <el-table-column align="left" label="单位名">
                <template slot-scope="scope">
                    <span>{{scope.row.dept_name}}</span>
                </template>
            </el-table-column>
            <el-table-column align="left" label="招聘表单">
                <template slot-scope="scope">
                    <span v-if="scope.row.ext_info_obj&&scope.row.ext_info_obj.template_id">{{scope.row.ext_info_obj.template_id | show_basedatas('template_id')}}</span>
                    <span v-else-if="scope.row.ext_info_obj&&scope.row.ext_info_obj.job_type">{{scope.row.ext_info_obj.job_type | show_basedatas('job_type')}}</span>
                    <span v-else>---</span>
                </template>
            </el-table-column>
            <el-table-column align="left" label="应聘表单">
                <template slot-scope="scope">
                    <span v-if="scope.row.template_id">{{scope.row.template_id | show_basedatas('template_id')}}</span>
                    <span v-else-if="scope.row.job_type">{{scope.row.job_type | show_basedatas('job_type')}}</span>
                    <span v-else>---</span>
                </template>
            </el-table-column>
            <el-table-column align="left" label="招聘配置">
                <template slot-scope="scope">
                    <span v-if="scope.row.ext_info&&scope.row.ext_info!='null'">已配置</span>
                    <span v-else>未配置</span>
                </template>
            </el-table-column>



            <el-table-column align="left" label="状态">
                <template slot-scope="scope">
                    <span v-if="scope.row.status==1">招聘中</span>
                    <span v-else>暂停招聘</span>
                </template>
            </el-table-column>
            <el-table-column align="left" label="操作" class-name="small-padding fixed-width" fixed="right" width="500">
                <template slot-scope="scope">
                    <el-button round size="mini" type="primary" @click="openEditor(scope.row.id)">编辑</el-button>
                    <el-button round size="mini" type="primary" @click="openZhaopinEditor(scope.row.id)">招聘配置</el-button>
                    <!--<el-button round size="mini" type="primary" @click="openEditor(scope.row.id)"  v-if="company.modules&&company.modules.indexOf('interview')!=-1">面试配置</el-button>-->
                    <!--<el-button round size="mini" type="primary" @click="openEditor(scope.row.id)"   v-if="company.modules&&company.modules.indexOf('train')!=-1">培训配置</el-button>-->
                    <el-button round size="mini" type="danger"
                               @click="doRemove(scope.row.id,'确定要删除【'+scope.row.name+'】吗？')">删除
                    </el-button>
                    <el-button round v-if="scope.row.status=='1'" size="mini" type="warning"
                               @click="doOperate(scope.row.id,'offline','确定要下线'+scope.row.name+'吗？')">下线
                    </el-button>
                    <el-button round v-if="scope.row.status=='2'" size="mini" type="success"
                               @click="doOperate(scope.row.id,'online','确定要上线'+scope.row.name+'吗？')">上线
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <div class="pagination-container">
            <el-pagination background @size-change="onSizeChange" @current-change="onCurrentChange"
                           :current-page="listQuery.pageNumber" :page-sizes="[12,50,100,10000]"
                           :page-size="listQuery.pageSize"
                           layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>
        <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible">
            <el-form :rules="formRules" ref="dataForm" :model="bean" label-position="right" label-width="120px"
                     style='width: 400px; margin-left:50px;'>
                <template>
                    <el-form-item label="岗位名称" prop="name">
                        <el-input v-model="bean.name" placeholder="输入岗位名称"></el-input>
                    </el-form-item>
                    <el-form-item label="所属部门" prop="dept_id">
                        <el-select style="" class="filter-item" v-model="bean.dept_id"
                                   placeholder="指定部门">
                            <el-option v-for="(item,index) in dept_list" :key="item.id" :label="item.name"
                                       :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="应聘表单" prop="job_type" v-if="company.template">
                        <el-select style="" class="filter-item" v-model="bean.job_type"
                                   placeholder="指定应聘表单">
                            <el-option v-for="(item,index) in job_type_list" :key="item.data_value" :label="item.data_text"
                                       :value="item.data_value"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="应聘表单" prop="template_id" v-else>
                        <el-select style="" class="filter-item" v-model="bean.template_id"
                                   placeholder="指定应聘表单">
                            <el-option v-for="(item,index) in template_list" :key="item.data_value" :label="item.data_text"
                                       :value="item.data_value"></el-option>
                        </el-select>
                    </el-form-item>
                    <div class="tips" style="text-align: center;"  v-if="!company.template">
                        <i class="iconfont icon-bangzhu" style="color:#1296db;margin-right:6px;"></i>
                        <a href="./table.html" target="_blank" style="text-decoration:underline;color:#1296db;">教我选择,该表单用于入职登记</a>
                    </div>
                </template>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取消</el-button>
                <el-button type="primary" @click="saveBean" :loading="dealing">确定</el-button>
            </div>
        </el-dialog>

    </div>
</template>
<script>
	import Vue from 'vue'
	import waves from '@/directive/waves' // 水波纹指令
	import API from '@/api'
	import Http from '@/http'
	import Store from '@/store'
	import Msg from '@/utils/msg'
	import Utils from '@/utils/common'
	import {mapGetters} from 'vuex'
	import _ from 'underscore'
	import Qiniu from '@/utils/qiniu'

	export default {
		directives: {waves},
		data() {
			return {
				dealing: false,
				multi: false,
				list: [],
				total: 0,
				listLoading: true,
				listQuery: {
					pageNumber: 1,
					pageSize: 12,
					keyword: '',
					status: ''
				},
				dept_list: [],
				job_type_list:Store.getters.basedata.job_type,
				template_list:Store.getters.basedata.template_id,
				bean: {},
				multipleSelection: [],
				dialogTitle: '',
				dialogFormVisible: false,
				formRules: {
					name: [{required: true, message: '请填写岗位名称', trigger: 'blur'}],
					dept_id: [{required: true, message: '请选择所属部门', trigger: 'blur'}],
					template_id: [{required: true, message: '请选择应聘表单', trigger: 'blur'}],
					job_type: [{required: true, message: '请选择应聘表单', trigger: 'blur'}]
				}
			}
		},
		filters: {},
		components: {},
		created() {
			this.loadList()
            this.loadDeptList()
		},
		computed: {
			...mapGetters([
				'company'
			]),
		},
		methods: {
			loadDeptList() {
				Http.getModel(API.get_company_dept_list, {}, false).then((json) => {
					this.loading = false
					if (json.code == 0) {
						this.dept_list = json.data.list
					}
				})
			},
			loadList() {
				this.listLoading = true
				Http.getModel(API.get_job_list, this.listQuery, false).then((json) => {
					this.loading = false
					if (json.code == 0) {
						var list = json.data.list
						list.forEach(function (item) {
							item.ext_info_obj = JSON.parse(item.ext_info)
						})
						this.list = list
						this.total = parseInt(json.data.total)
						this.listLoading = false
					}
				})
			},
			openZhaopinEditor(id){
				this.$router.push({path: 'editor', query: {job_id: id}})
            },
			openEditor(id) {
				this.dialogFormVisible = true
				if (id) {
					this.loadBean(id)
					this.dialogTitle = '编辑供应商'
				} else {
					this.dialogTitle = '新增供应商'
					this.bean = {
						icon: "",
						url: '',
						name: '',
					}
				}
				this.$nextTick(() => {
					this.$refs['dataForm'].clearValidate()
				})
			},
			loadBean(id) {
				Http.getModel(API.get_job, {id: id}).then((json) => {
					if (json.code == 0) {
						let bean = json.data
						this.bean = bean
					}
				})
			},
			saveBean() {
				this.$refs['dataForm'].validate((valid) => {
					if (valid) {
						this.dealing = true
						Http.getModel(API.save_job, this.bean, false).then((json) => {
							this.dealing = false
							if (json.code == 0) {
								this.dialogFormVisible = false
								Msg.success(json.msg, () => {
									this.loadList()
								})
							} else {
								Msg.error(json.msg)
							}
						})
					}
				})
			},
			doRemove(ids, tips) {
				if (!ids) {
					if (this.multipleSelection.length == 0) {
						Msg.error("请先选择");
						return false;
					} else {
						ids = _.pluck(this.multipleSelection, "id").join(",");
					}
				}
				Msg.confirm(tips, () => {
					Http.getModel(API.remove_job, {ids: ids}, false).then((json) => {
						if (json.code == 0) {
							Msg.success(json.msg, () => {
								this.loadList()
							})
						} else {
							Msg.error(json.msg)
						}
					})
				})
			},
			doOperate(ids, cmd, tips) {
				var status = 0;
				var url = "";
				switch (cmd) {
					case 'online':
						status = 2;
						url = API.job_online;
						break;
					case 'offline':
						status = 1;
						url = API.job_offline;
						break;
					default:
						break;
				}
				if (status == 1 || status == 2) {
					if (!ids) {
						if (this.multipleSelection.length == 0) {
							Msg.error("请先选择");
							return false;
						} else {
							ids = _.pluck(this.multipleSelection, "id").join(",");
						}
					}
					Msg.confirm(tips, () => {
						Http.getModel(url, {ids: ids, status: status}, false).then((json) => {
							if (json.code == 0) {
								Msg.success(json.msg, () => {
									this.loadList()
								})
							} else {
								Msg.error(json.msg)
							}
						})
					})
				}
			},
			/***   公用部分 start ***/
			onSelectionChange(val) {
				this.multipleSelection = val;
			},
			doSearch() {
				this.listQuery.page = 1
				this.loadList()
			},
			onSizeChange(val) {
				this.listQuery.pageSize = val
				this.loadList()
			},
			onCurrentChange(val) {
				this.listQuery.pageNumber = val
				this.loadList()
			},
			/***   公用部分 end ***/
		}
	}
</script>
<style>

</style>
